<template>
  <div class="container">
    <div>
      <a-button type="primary" @click="addEntity">
        <template #icon><icon-plus-circle /></template>添加
      </a-button>
    </div>
    <a-table :bordered="{cell:true}" :pagination="false" stripe :data="state.entityObj">
      <template #columns>
        <a-table-column title="工序编码" data-index="code"></a-table-column>
        <a-table-column title="工序名称" data-index="name"></a-table-column>
        <a-table-column data-index="lx">
          <template #title>
            <span style="color: #f60000">产品类型<br /> 搭建产品工艺路线，根据产品类型选择工序,可认为是工序集合</span>
          </template>
        </a-table-column>
        <a-table-column data-index="bgdlx">
          <template #title>
            <span style="color: #f60000">报工单类型<br/>(不同工序，报工内容不一致)</span>
          </template>
        </a-table-column>
        <a-table-column title="是否关键工序" data-index="gj"></a-table-column>
        <a-table-column title="是否质检" data-index="zj"></a-table-column>
        <a-table-column data-index="gongshi">
          <template #title>
            <span style="color: #f60000">标准工时<br /> 如果只报完工意义不大</span>
          </template>
        </a-table-column>
        <a-table-column title="加工车间" data-index="chenjian"></a-table-column>
        <a-table-column title="设备绑定" data-index="sb"></a-table-column>
        <a-table-column title="人员绑定" data-index="ry"></a-table-column>
        <a-table-column title="操作" width="200">
          <template #cell="{ record }">
            <a-space>
              <a-button type="primary" size="small" @click="editEntity(record.id)"><template #icon><icon-edit /></template>修改</a-button>
              <a-popconfirm content="确认删除吗?" @ok="deleteEntity(record.id)">
                <a-button type="primary" status="danger" size="small"><template #icon><icon-delete /></template>删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
    <a-modal :title="state.popupTitle" v-model:visible="state.entityDetailVisible" :footer="false" width="1200px">
      <GongxuDetail v-if="state.entityDetailVisible" v-model="state.entityDetailVisible" :entityId="state.popupEntityId"></GongxuDetail>
    </a-modal>

    <a-card title="功能介绍" class="mt15">
      <ul>
        <li>1、工序管理是生产成品需要经过的加工步骤， 是工艺流程的基础数据</li>
        <li>2、工序，需要维护设备和人员，只有相关人员选择相关设备才能对工序进行报工</li>
        <li>3、工序的产品类型，有齿轮箱锻件和棒材， 同样是下料工序，可能会有区别，所以在工艺路线和工序上有产品类型的区分。 <span style="color: #00308f">当然如果在工序的前缀加区分，使技术人员不选错，也不是必选项</span></li>
        <li>4、工序报工单类型，工序报工时，不同工序的报工单一定是不一样的，比如下料工序会填写原材料编号。
          <br/>如果你的产品支持自定义表单，那这里就挂自定义表单，如果不支持，那我们告诉你有几种格式，你后台维护好，不同的工序报工渲染不同的报工单
          <br/><span style="color: #00308f">更简单的方式，你在通用报工单填写几个自定义字段，有些报工单需要添加时，就用，不用就空着</span>
        </li>
        <li><span style="color: #00308f">工序的加工车间，当工序的下一步工序，更换车间时，是否需要提现半成品的转接单</span></li>
      </ul>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { Message } from '@arco-design/web-vue'
import {reactive, ref, onMounted, onUnmounted, defineAsyncComponent} from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const GongxuDetail = defineAsyncComponent(() => import('@/views/basedata/gongxu/gongxuDetail.vue'));

const state = reactive({
  entityObj: [],
  entityDetailVisible : false,
  popupTitle : '',
  popupEntityId : 0,
})
const loadList = ()=>{
  state.entityObj = [
    {id : 1, name : '下料', code:'XL', lx:'棒材', bgdlx:'下料报工单', gj:'否', zj:'否', gongshi:'4.5小时', sb:'下料机器1，下料机器2', ry:'张三1,张三2', chenjian:'棒材下料车间'},
    {id : 2, name : '快锻', code:'KD', lx:'棒材', bgdlx:'棒材通用报工单',gj:'否', zj:'否', gongshi:'1.5小时', sb:'快锻1，快锻2', ry:'张三1,张三2', chenjian:'棒材锻压车间'},
    {id : 3, name : '精锻', code:'JD', lx:'棒材', bgdlx:'棒材通用报工单',gj:'否', zj:'否', gongshi:'2.5小时', sb:'精锻1，精锻2', ry:'张三1,张三2', chenjian:'棒材锻压车间'},
    {id : 4, name : '热处理', code:'RCL', lx:'棒材', bgdlx:'棒材通用报工单',gj:'是', zj:'否', gongshi:'20小时', sb:'热处理1，热处理2', ry:'张三1,张三2', chenjian:'棒材下料车间'},
    {id : 5, name : '机加工', code:'JJG', lx:'棒材', bgdlx:'棒材通用报工单',gj:'否', zj:'否', gongshi:'4.5小时', sb:'机加工1，机加工2', ry:'张三1,张三2', chenjian:'棒材机加工车间'},
    {id : 11, name : '下料', code:'XL_2', lx:'齿轮箱锻件', bgdlx:'齿轮箱通用报工单',gj:'否', zj:'否', gongshi:'4小时', sb:'锯切机001,锯切机002', ry:'张三1,张三2', chenjian:'齿轮箱下料车间'},
    {id : 12, name : '锻压', code:'DY', lx:'齿轮箱锻件', bgdlx:'齿轮箱通用报工单',gj:'是', zj:'否', gongshi:'5小时', sb:'锻压机器1，锻压机器2', ry:'张三1,张三2', chenjian:'齿轮箱锻压车间'},
    {id : 3, name : '碾环', code:'NH', lx:'齿轮箱锻件', bgdlx:'齿轮箱通用报工单',gj:'否', zj:'否', gongshi:'2小时', sb:'碾环机', ry:'张三1,张三2', chenjian:'齿轮箱锻压车间'},
  ]
}
const addEntity = ()=>{
  //state.popupEntityId = Math.floor(Math.random() * 100000) * -1;
  state.popupEntityId = 0;
  state.popupTitle= "新增工序"
  state.entityDetailVisible= true
}
const editEntity = (id)=>{
  state.popupEntityId= id;
  state.popupTitle= "修改工序"
  state.entityDetailVisible= true
}
const deleteEntity = (id)=>{
  Message.warning("功能未开")
}
onMounted(()=>{
  loadList();
})
onUnmounted(()=>{
})
</script>

<style scoped lang="less">
 ul{
   color: #f60000; font-weight: bold;font-size: 16px;
   li{
   padding : 10px;
 }
 }
</style>
